<template>
  <div class="home">
    <div class="animated fadeInUp ma_to">
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
     <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
  </ol>
  <div class="carousel-inner">  
    <div class="carousel-item active"  v-for="(val,index) in lunbo" :key="index">
      <img :src="val.img" class="d-block w-100 hei_ght" alt="...">
       <p class="animated lightSpeedIn ding_we">{{val.name}}</p>
       <p class="animated lightSpeedIn ding_e">{{val.xiang_q}}</p>
    </div>
     <div class="carousel-item"  v-for="(val,index) in lunbo4" :key="index">
      <img :src="val.img" class="d-block w-100 hei_ght" alt="...">
       <p class="animated lightSpeedIn ding_hei">{{val.name}}</p>
       <p class="animated lightSpeedIn ding_he">{{val.xiang_q}}</p>
    </div>
    <div class="carousel-item"  v-for="(val,index) in lunbo1" :key="index">
      <img :src="val.img" class="d-block w-100 hei_ght" alt="...">
       <p class="animated lightSpeedIn ding_hei">{{val.name}}</p>
       <p class="animated lightSpeedIn ding_he">{{val.xiang_q}}</p>
    </div>
    <div class="carousel-item"  v-for="(val,index) in lunbo2" :key="index">
      <img :src="val.img" class="d-block w-100 hei_ght" alt="...">
       <p class="animated lightSpeedIn ding_fen">{{val.name}}</p>
       <p class="animated lightSpeedIn ding_fe">{{val.xiang_q}}</p>
    </div>
    <div class="carousel-item"  v-for="(val,index) in lunbo3" :key="index">
      <img :src="val.img" class="d-block w-100 hei_ght" alt="...">
       <p class="animated lightSpeedIn ding_hong">{{val.name}}</p>
       <p class="animated lightSpeedIn ding_hon">{{val.xiang_q}}</p>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
 <div class="di_aa mmyy">
   <div class="container "> 
     <div class="row">
     <div class="col-md-6 col-md-offset-1 font_x">
     <img src="../../public/img/ahaLogo.png" alt/> 
     
     <p>尊贵礼遇享不停，升级aha会员</p>
     <p>预计可省¥358+，<a href="/aha/index.html" class="more">了解更多</a></p>
     <button class="btn_am">立即开通 ¥99/年</button>
     </div>
     <div class="col-md-5 fontimg">
     <img src="../../public/img/ahaRights1.png" alt/>
     </div>
   </div>
   </div>
</div>

 
   
<div class="beijingse">
  <div class="container bjs_bai">
   <div class=" tanxing">
       <div class="ninini"  v-for="(val,index) in zhu_shop" :key="index"> 
         <img :src="val.img" data-toggle="modal"
          data-target="#exampleModal" @click="mtk(val.img, val.name, val.price)" alt/>
       <p>{{val.name}}</p>
       <h5>{{val.xiang_q}}</h5>
        <h4>{{val.price}}</h4>
       </div>
      
   </div>
<div class=" tanxing">
       <div class="ninini"  v-for="(val,index) in zhu_shop1" :key="index"> 
         <img :src="val.img" data-toggle="modal"
          data-target="#exampleModal" @click="mtk(val.img, val.name, val.price)" alt/>
       <p>{{val.name}}</p>
       <h5>{{val.xiang_q}}</h5>
        <h4>{{val.price}}</h4>
       </div>
      
   </div>
  
   </div>
  </div>

<!-- 模态框 -->
<div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">商品信息</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-4 bgc-big">
                  <img :src="img_ii" class="card-img-top" alt="..." />
                </div>
                <div class="col-md-1"></div>
                <div class="clear_fix col-md-7">
                  <button class="btn_1">❤</button>
                  <div class="xinxin">
                    <p>★★★★☆<span>4星</span></p>
                  </div>
                  <h5 class="title f_left">
                    <span>{{ namee }}</span>
                    <!---->
                    <p>
                      Curabitur non nulla sit amet nisl tempus convallis qui
                      aclectus。
                    </p>
                  </h5>
                  <div class="price_wrap f_right ">
                    <p class="new_price">
                      <span>{{ pr_icee }}</span>
                    </p>
                    <!---->
                    <!---->
                    <!---->
                  </div>
                </div>

                <!-- 右边布局 -->
                <div class=" right_font">
                  <div class="title_wrap clear_fix">
                    <!---->
                    <a href="" class="aha_entrance">
                      <img
                        src="//newimgcdn.lapetit.cn/web/images/aha/aha_link.png?2019112001"
                        alt=""
                      />
                    </a>
                    <div class="leng_d">
                      <span>❄</span>
                      <span class="zzz">保鲜条件：0-4℃冷藏，5℃食用最佳</span>
                    </div>
                    <!---->
                  </div>
                </div>
                <br />
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="you">
              <span @click="del()">
                -
              </span>
              <input
                type="text"
                name="zjia"
                id="txt"
                v-model="val_ue"
                @change="kog"
                oninput="value=value.replace(/[^\d]|^[0]/g,'')"
              />
              <span @click="add()">
                + </span
              >&nbsp;
              <button
                class="btn_2"
                data-dismiss="modal"
                aria-label="Close"
                @click="btn_buy"
              >
                <router-link to="/trolley">
                  立即购买
                </router-link>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

  <!-- <div class="container">
    <img  style="height:100px,margin:auto" src="../../public/img/contact_03.jpg" alt/>
  </div> -->
  </div>
</template>

<style lang="less">
.footer_xx {
  margin-top: 80px;
  text-align: center;
   background-color: #855648;
}
.btn_2 a{
  color: #fff;
  text-decoration: none;
}
.img_xinpin {
  position: absolute;
  top: 10px;
}
.img_xinpin img {
  width: 60px;
  height: 20px;
}
.sc_coco p {
  color: #a88866;
  font-size: 16px;
}
.sc_coco button {
  width: 70px;
  height: 24px;
  font-size: 12px;
  //background-color: powderblue;
  border: 0px solid;
  background: #d49a5b;
  color: #fff;
  padding: 0 5px;
  float: right;
  margin-top: -34px;
  outline: none;
}
.sc_coco button:hover {
  background: #a17e59;
}
.sc_coco div button a {
  color: #fff;
  text-decoration: none;
}
.bgc-big img {
  width: 100%;
  height: 150px;
  margin-top: 6px;
}
.new_price,
.taste_left {
  font-size: 16px;
  color: #816b4e;
}
.aha_entrance img {
  width: 445px;
}
.btn_1 {
  margin-top: 7px;
  background-color: #fff;
  border: 1px solid #eee;
  color: pink;
}
.btn_2 {
  width: 100px;
  height: 48px;
  font-size: 16px;
  background-color: #634832;
  border: 1px solid #eee;
  color: rgb(255, 255, 255);
  padding-top: 5px;
  margin-right: 15px;
  position: relative;
  top: -6px;
}
.xinxin p {
  background-color: #fff;
  color: #816b4e;
  font-size: 20px;
}
.xinxin span {
  font-size: 16px;
  background-color: #fff;
  color: #c58181;
  margin: -2px 0 0 5px;
}
.f_left span {
  font-size: 16px;

  color: #816b4e;
}
.f_left p {
  margin-top: 7px;
  font-size: 16px;

  color: #816b4e;
}
.you {
  padding-left: 3px;
}
.you span {
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 40px;
  height: 49px;
  border: 1px solid #f0f2f3;
  background-color: #fff;
  transition: 0.3s;
}
.you input {
  background-color: #fff;
  outline: none;
  width: 50px;
  height: 49px;
  text-align: center;
  border: 1px solid #f0f2f3;
}
.cheng_fen h5 {
  font-weight: bold;
  margin-top: 13px;
  font-size: 16px;
}
.cheng_fen h5 span {
  margin-top: 10px;
  margin-left: 20px;
  color: #ac8585;
}
.leng_d {
  font-size: 24px;
  color: rgb(113, 238, 238);
}
.zzz {
  margin: -10px 0 0 20px;
  font-size: 14px;
  color: #665e5e;
}
.hei_ght{
  height: 470px;
}
.donghuaxiao{
position: absolute;
top: 50px;
left: 50px;
}
.ma_to{
  margin-top: 1px;
}
.ding_a{
  width: 100%;
  height: 500px;
}
.mmyy{
  height: 240px;
  background: url(../../public/img/ahaPanelBg.jpg) no-repeat center;
  background-size: 100% 200px;
}
.di_aa{
  background-color: rgb(250, 250, 250);
}
.font_x{
  font-size: 14px;
  color: #443214;
  margin-top: 45px;
}
.btn_am{
  text-decoration: none;
  color: #423f3f;
  margin-left: 15px;
 background-color: #fff;
 border: 1px solid;
 width: 180px;
 height: 40px;
}
.btn_am:hover{
  color: #fff;
  background-color: #cea461;
}
.more{
  color: #cea461;
  text-decoration: underline;
}
.font_x img{
  margin-bottom: 10px;
  opacity: 0.8;
}
.fontimg img{
  margin-top: 65px;
  opacity: 0.8;
}
.tanxing img{
   width: 250px;
   height: 250px;
   margin-top: 20px;
    margin-left: 15px;
}
.tanxing{
   display: flex;
   justify-content: space-evenly;
}
.bjs_bai{
  background-color: #fff;
  height: 760px;
   border: 2px solid green;
   border-image: linear-gradient(to bottom right,pink,#c4dd69,#cea461) 1 1;
}
.tanxing p{
  font-size: 16px;
  text-align: center;
}
.tanxing h5{
  font-size: 16px;
  color:rgb(126, 110, 110);
  text-align: center;
}
.tanxing h4{
 text-align: center;
 color: #cea461;
  font-size: 20px;
  margin-top: -4px;
}
.beijingse{
  background-color: rgb(248, 248, 248);
  height: 795px;
}
.ninini{
  width: 280px;
  height: 370px;
  transition: linear all 1s;
}
.ninini:hover{
  background-color: #FFECEC;
}
.ding_we{
  font-size: 38px;
  position: absolute;
  top: 300px;
  left: 310px;
  color: #0779c9;
}
.ding_e{
  font-size: 24px;
   position: absolute;
  top: 360px;
  left: 315px;
   color: #0779c9;
}
.ding_hei{
  font-size: 38px;
  position: absolute;
  top: 300px;
  left: 310px;
  color: #000000;
}
.ding_he{
   font-size: 24px;
   position: absolute;
  top: 360px;
  left: 315px;
   color: #000000;
}
.ding_fen{
  font-size: 38px;
  position: absolute;
  top: 300px;
  left: 310px;
  color:#e0484e;
}
.ding_fe{
   font-size: 24px;
   position: absolute;
  top: 360px;
  left: 315px;
   color:#e0484e;
}
.ding_hong{
  font-size: 38px;
  position: absolute;
  top: 300px;
  left: 310px;
  color:#d20a0a;
}
.ding_hon{
   font-size: 24px;
   position: absolute;
  top: 360px;
  left: 315px;
   color: #d20a0a;
}

</style>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  data(){
     return{
       img_ii: "",
      namee: "",
      pr_icee: "",
       val_ue: 1,
       lunbo:'',
       lunbo1:'',
       lunbo2:'',
       lunbo3:'',
       lunbo4:'',
       zhu_shop:'',
       zhu_shop1:'',
      
      //   lunbo:[
      //       {img:'./img/xue.jpg',name:'「滑」冬天的第一场雪',xiang_q:'全员滑雪大冒险  解锁雪域半价'},
      //     ],
      //     lunbo1:[       
      //       {img:'./img/xue2.jpg',name:'冰の面包  爆浆来袭',xiang_q:'诺心OK零食出品  限时立减20元'},
      //     ],
      //     lunbo2:[    
      //       {img:'./img/xue3.jpeg',name:'买大送小 畅意轻享',xiang_q:'购0轻享大蛋糕 赠随机款盒子蛋糕2个'}, 
      //     ],
      //     lunbo3:[
      //       {img:'./img/xue4.jpg',name:'Happy Birthday',xiang_q:'11月，爱你一心一意,生日专「数」 惊喜加倍 '},
      //     ],
      //     lunbo4:[
      //       {img:'./img/cccccc.jpg',name:'圣诞狂欢季 点亮童话排队',xiang_q:'新品幻彩上市 '},
      //     ],
      //     zhu_shop:[
      //       {img:'./img/list_23567.jpg',name:'雪域燕麦芝士·轻享',xiang_q:'甄选OATLY燕麦露 轻享香甜浓滑',price:'￥298'},
      //        {img:'./img/list_23640.jpg',name:'幻彩狂欢',xiang_q:'幻彩光影中 畅享莓妙狂欢',price:'￥298'},
      //         {img:'./img/list_12287.jpg',name:'环游世界',xiang_q:'五星好评 9种口味一次过瘾',price:'￥258'},
      //          {img:'./img/list_23019.jpg',name:'巴斯克流心',xiang_q:'流心诱惑！风靡Ins的芝士蛋糕',price:'￥218'},
      //     ],
      //      zhu_shop1:[
      //       {img:'./img/list_23567.jpg',name:'雪域燕麦芝士·轻享',xiang_q:'甄选OATLY燕麦露 轻享香甜浓滑',price:'￥298'},
      //        {img:'./img/list_23640.jpg',name:'幻彩狂欢2',xiang_q:'幻彩光影中 畅享莓妙狂欢',price:'￥298'},
      //         {img:'./img/list_12287.jpg',name:'环游世界',xiang_q:'五星好评 9种口味一次过瘾',price:'￥258'},
      //          {img:'./img/list_23019.jpg',name:'巴斯克流心',xiang_q:'流心诱惑！风靡Ins的芝士蛋糕',price:'￥218'},
      //     ],
     }
  },
  components: {
    HelloWorld
  },
  methods:{
mtk(img_i, name, pr_ice) {
      this.img_ii = img_i;
      this.namee = name;
      this.pr_icee = pr_ice;
    },
    kog(){
      if(this.val_ue==""){
        this.val_ue=1
      }
    },
     btn_buy() {
      var obj = {};
     
      //  this.arr = localStorage.getItem("yh") ? localStorage.getItem("yh") : [];
      //   if (this.arr.length != 0) {
      //       this.arr = JSON.parse(this.arr);
      //   }
      //   // 图片路径
      obj.imglj = this.img_ii;
      //   // 价钱
      var price_buy = parseInt(this.pr_icee.substring(1));
      obj.jiaqwb = price_buy;
      //   // 商品名
      obj.shangpmwb = this.namee;
      //   // 数量
      this.val_ue = parseInt(this.val_ue);

      obj.shuliang = this.val_ue;
      obj.stat =false
      obj.total= this.val_ue*price_buy
      this.$store.commit("add", obj);

      for (var j = 0; j < this.$store.state.arr.length; j++) {
        for (var i = j + 1; i < this.$store.state.arr.length; i++) {
          if (this.$store.state.arr[i].shangpmwb ==this.$store.state.arr[j].shangpmwb) {
            this.$store.state.arr[j].shuliang =this.$store.state.arr[j].shuliang + obj.shuliang;
            this.$store.state.arr.splice(i, 1);
            this.$store.getters.getCount.num--
            i--;
          }
        }
      }

      //console.log(this.arr);
      //   this.str= JSON.stringify(this.arr);
      //console.log(this.str);
      // localStorage.setItem("yh", this.str)

      //  console.log(this.$store.state.arr[0].shangpmwb);
    }
  },
  mounted(){
    this.$axios.get('http://47.114.130.21:3001/index').then((data)=>{
      console.log(data);
      this.lunbo=JSON.parse(data.data[0].lunbo) 
      this.lunbo1=JSON.parse(data.data[0].lunbo1)
      this.lunbo2=JSON.parse(data.data[0].lunbo2)
      this.lunbo3=JSON.parse(data.data[0].lunbo3)
      this.lunbo4=JSON.parse(data.data[0].lunbo4)
      this.zhu_shop=JSON.parse(data.data[0].zhu_shop)
      this.zhu_shop1=JSON.parse(data.data[0].zhu_shop1)
    })
  }
};
</script>

